<template>
  <div class="homeContainer">
    <myHead></myHead>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
    <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <acticle v-for="item in ActicleList" :key="item.art_id" :title="item.title" :times="item.pubdate" :author="item.aut_name" :commentNum="item.comm_count" :imageNum="item.cover.type" :imageURL="item.cover.images"></acticle>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1>
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
  <h1>6</h1>
  <h1>7</h1>
  <h1>8</h1>
  <h1>9</h1>
  <h1>10</h1>
</van-list>
</van-pull-refresh>
  </div>
</template>

<script>
// import { Toast } from 'vant'
import myHead from '@/components/Myhead.vue'
// import axios from '@/utils/request.js'
// 按需导入 API 接口
import { getActicleListAPI } from '@/api/acticleAPI.js'
// 导入文章模块
import acticle from '@/components/acticle.vue'
export default {
  name: 'myHome',
  components: {
    myHead,
    acticle
  },
  data () {
    return {
      // 文章页码
      page: 1,
      // 每页的文章数量
      limit: 10,
      // 文章列表集合
      ActicleList: [],
      list: [],
      loading: false,
      finished: false,
      isLoading: false
    }
  },
  methods: {
    async initActicleList () {
      const { data: res } = await getActicleListAPI(this.page, this.limit)
      this.ActicleList = res
      // this.loading = false
    },
    onLoad () {
      this.loading = true
      if (this.ActicleList.length === 0) {
        this.finished = true
      }
      console.log('触发了事件')
    },
    onRefresh () {
      setInterval(function () {
        this.isLoading = false
      }, 1000)
    }
  },
  created () {
    this.initActicleList()
  }
}
</script>

<style lang="less" scoped>
.homeContainer{
  padding: 50px 0;
}
</style>
